<template>
  <div class="...common.countToInit,-total chart-box2">
    <div class="chart-container overx-auto" ref="numTotalBox">
      <a-row type="flex" :wrap="false" class="h-100p">
        <a-col
          :flex="itemWidth"
          class="total-number"
          v-for="(item, key) in data"
          :key="key"
        >
          <div class="number-box number">
            <count-to
              :start-val="item.oldVal"
              :end-val="item.newVal"
              :duration="3000"
            />
          </div>
          <div class="title">{{ item.title }}</div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  watch,
  nextTick,
  onMounted,
  computed,
} from "vue";
import CountTo from "../countTo/index.vue";
import store from "../../../../store";
import common from "../../utils/common";

export default defineComponent({
  name: "NumTotal",
  components: { CountTo },
  setup() {
    const state = reactive({
      numTotalBox: null,
      itemWidth: "100px",
      data: {
        leaseArea: {
          ...common.countToInit,
          title: "在租面积",
        },
        rentAvgPrice: {
          ...common.countToInit,
          title: "在租实时均价",
        },
        monthLeaseNums: {
          ...common.countToInit,
          title: "本月签合同数",
        },
        monthLeaseAreas: {
          ...common.countToInit,
          title: "本月签约面积",
        },
        leaseContractNums: {
          ...common.countToInit,
          title: "在租合同数",
        },
        ownerNums: {
          ...common.countToInit,
          title: "累计租客",
        },
        ownerUserTotal: {
          ...common.countToInit,
          title: "租客员工数",
        },
        totalManageArea: {
          ...common.countToInit,
          title: "管理面积",
        },
        totalVacantArea: {
          ...common.countToInit,
          title: "空置招商面积",
        },
        rentPrecent: {
          ...common.countToInit,
          title: "当前出租率",
        },
      },
    });

    const isMobile = computed(() => store.getters.dataVMobile);

    const getItemSize = () => {
      nextTick(() => {
        if (isMobile.value) {
          state.itemWidth = state.numTotalBox.offsetWidth / 2.5 + "px";
        } else {
          state.itemWidth =
            state.numTotalBox.offsetWidth / Object.keys(state.data).length +
            "px";
        }
        // console.log("------------state.itemWidth", state.itemWidth);
      });
    };
    watch(
      () => store.getters.resizeTrigger,
      () => {
        getItemSize();
      }
    );

    watch(
      () => store.getters.rentControl.TopCardManage,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { TopCardManage } = store.getters.rentControl;
      if (TopCardManage) {
        for (let key in TopCardManage) {
          let newItem = {
            oldVal: state.data[key].newVal,
            newVal: Number(TopCardManage[key]),
            title: state.data[key].title,
          };
          state.data[key] = { ...newItem };
        }
      }
    };

    const init = () => {
      getData();
      getItemSize();
    };
    onMounted(() => {
      init();
    });

    return {
      ...toRefs(state),
    };
  },
});
</script>
<style lang="less" scoped>
@import "../../styles/common.less";
</style>
